2021-07-25
En rolig och lärorik uppgift – men även frustrerande då jag aldrig har utvecklat för WordPress förut. Det tog ett tag innan alla bitar föll på plats. Det som var svårt var bl.a. att få fason på hierarkin för varje sidtyp, designen på "Om oss" och inlägg samt att få koden att validera.
Det svåraste var nog att återskapa layouten med två kolumner på "Om oss" samt inlägg som detta. Problemet är placeringen av den utvalda bilden i förhållande till innehållet. Den utvalda bilden är längst upp under huvudrubriken på mobil, men till höger på desktop. Av denna anledning var det nödvändigt att filtrera the_content() så att första stycket hamnar i kolumnen till vänster om den utvalda bilden. Resten skrivs ut i varsin kolumn. Jag valde att placera koden direkt i page.php och single.php istället för functions.php för att förhindra att den körs på varje sida. En CSS-baserad lösning med column count hade inte fungerat eftersom den utvalda bilden alltid skulle hamna till vänster på desktop.
När det gäller valideringen så var det främst inläggssidan, "Nyheter", som ställde till det. Denna sida visar fem inlägg som mest. Varje rad har ett omslutande div-element för att förhindra att inlägg som ska vara till vänster hamnar till höger om högerkolumnen i raden ovanför är kortare än vänsterkolumnen. Knepet var att stänga div-elementet ordentligt vid varje iteration med tanke på att antalet inlägg varierar. Detta är inget problem när man har ett jämnt antal inlägg då man alltid stänger div-elementet efter högerkolumnen. Men eftersom det sista inlägget kan hamna till vänster, så måste div-elementet stängas även där. Jag löste det genom att skapa en funktion som räknar antalet inlägg. I The loop på home.php finns en if-sats som stänger div-elementet om den aktuella vänsterkolumnen skulle innehålla det sista inlägget. Jag valde även att ta bort div-elementet med id "post-wrapper" då detta aldrig stängdes ordentligt, vilket resulterade i valideringsfel.
Sammanfattningsvis en mycket givande uppgift, om än inte lätt.